<template>
   <div class="app-container">
     <div id="main">
       <!-- 公共头 -->
       <myheader class="header"/>
       <div class="main-container middle_outer">
         <el-scrollbar class='page-component__scroll middle_inner'>
           <!-- 内容区域 -->
           <nuxt/>
         </el-scrollbar>
       </div>
       <!-- 公共底 -->
       <myfooter class="footer"/>
     </div>
   </div>
</template>
<script>
import '~/assets/css/app.css'
import '~/assets/css/chunk.css'
import '~/assets/css/iconfont.css'
import '~/assets/css/main.css'

import myheader from "./myheader";
import myfooter from "./myfooter"
export default {
  name: 'default',
  components: {
    myheader, myfooter
  }
}
</script>

<style scoped>
  .header {
      position: absolute;
      top: 0px;
      height: auto; /*高度可以不写，可以通过内部元素撑开，但是需要考虑是否会与自适应部分发生重合*/
      width: 100%; /*宽度是必要，如果没有宽度就无法撑出div*/
  }

  .middle_outer {
    position: absolute !important;
    position: relative;
    top: 66px !important; /*header部分的高度*/
    top: 0;
    bottom: 55px; /*footer部分的高度*/
    width: 100%;
    overflow: hidden; /*外层div不滚动，而是内层div滚动，实现自适应*/
    height: auto !important;
    height: 100%;
  }


  .middle_inner {
    height: 100%;
    overflow-y: auto; /*当内容超出后，就会出现滚动条*/
  }

  .footer {
    position: absolute;
    bottom: 0px;
    height: auto; /*高度可以不写，可以通过内部元素撑开，但是需要考虑是否会与自适应部分发生重合*/
    width: 100%; /*宽度是必要，如果没有宽度就无法撑出div*/
  }
</style>
